<script setup lang="ts">
import { NAvatar, NDrawer } from 'naive-ui'

const router = useRouter()
const userStore = useUserStore()
const blogStore = useBlogStore()
const searchStore = useSearchStore()

const menuToggle = ref(false)
function handleIconMenu() {
  menuToggle.value = !menuToggle.value
}
function handleSearch() {
  searchStore.setModal(true)
}
function logout() {
  menuToggle.value = false
  userStore.clearUserInfo()
  router.push('/login')
}
</script>

<template>
  <header class="fixed top-0 left-0 right-0 z-50 md:hidden">
    <div class="flex h-14 items-center justify-between px-4 shadow-md backdrop-blur">
      <!-- <h1 class="cursor-pointer text-2xl" @click="router.push('/')">
        {{ blogStore.siteConfig?.siteAuthor ?? 'Vinson' }}
      </h1> -->
      <h1 class="cursor-pointer" @click="router.push('/')">
        <svg
          class="svg-stroke"
          viewBox="0 4.470000267028809 135.94000244140625 43.64999771118164"
          height="2rem"
        >
          <g>
            <path
              d="M30.57 45.21Q34.81 41.89 38.22 38.16Q41.63 34.42 44.01 30.60Q46.39 26.78 47.66 22.99Q48.93 19.19 48.93 15.75Q48.93 13.75 48.50 12.01Q48.07 10.28 47.27 9.02Q46.46 7.76 45.32 7.04Q44.19 6.32 42.77 6.32L42.31 6.32Q41.89 6.32 41.61 6.08Q41.33 5.83 41.33 5.42Q41.33 4.83 41.76 4.65Q42.19 4.47 42.72 4.47Q44.51 4.47 46.00 5.30Q47.49 6.13 48.54 7.62Q49.58 9.11 50.17 11.13Q50.76 13.16 50.76 15.53Q50.76 19.38 49.43 23.45Q48.10 27.51 45.50 31.63Q42.90 35.74 39.05 39.82Q35.21 43.90 30.20 47.78Q30.08 47.88 29.88 48.00Q29.69 48.12 29.42 48.12Q28.96 48.12 28.74 47.81Q28.52 47.51 28.52 47.09Q28.52 46.92 28.55 46.39Q28.59 45.85 28.64 45.07Q28.69 44.29 28.76 43.35Q28.83 42.41 28.88 41.44Q28.93 40.48 28.97 39.58Q29.00 38.67 29.00 37.96Q29.03 32.62 28.20 28.09Q27.37 23.56 25.56 20.24Q23.75 16.92 20.91 15.05Q18.07 13.18 14.04 13.18Q11.04 13.18 8.75 14.00Q6.47 14.82 4.93 16.16Q3.39 17.50 2.61 19.20Q1.83 20.90 1.83 22.66Q1.83 24.22 2.36 25.45Q2.88 26.68 3.80 27.55Q4.71 28.42 5.96 28.87Q7.20 29.32 8.64 29.32Q9.86 29.32 10.86 29.05Q11.87 28.78 12.57 28.45Q13.28 28.13 13.68 27.84Q14.09 27.56 14.14 27.51Q14.26 27.39 14.42 27.36Q14.58 27.32 14.72 27.32Q15.09 27.32 15.36 27.55Q15.63 27.78 15.63 28.17Q15.63 28.64 15.31 28.88Q15.26 28.93 14.77 29.28Q14.28 29.64 13.42 30.04Q12.55 30.44 11.33 30.79Q10.11 31.13 8.62 31.13Q6.79 31.13 5.20 30.52Q3.61 29.91 2.47 28.78Q1.32 27.66 0.66 26.11Q0 24.56 0 22.68Q0 20.58 0.90 18.55Q1.81 16.53 3.58 14.94Q5.35 13.35 7.95 12.39Q10.55 11.43 13.96 11.43Q18.38 11.43 21.57 13.34Q24.76 15.26 26.82 18.75Q28.88 22.24 29.87 27.16Q30.86 32.08 30.86 38.09Q30.86 39.77 30.79 41.56Q30.71 43.36 30.57 45.21ZM54.69 27.34Q54.69 28.27 54.04 28.92Q53.39 29.57 52.47 29.57Q51.54 29.57 50.89 28.92Q50.24 28.27 50.24 27.34Q50.24 26.88 50.42 26.48Q50.59 26.07 50.89 25.77Q51.20 25.46 51.60 25.29Q52.00 25.12 52.47 25.12Q52.93 25.12 53.33 25.29Q53.74 25.46 54.04 25.77Q54.35 26.07 54.52 26.48Q54.69 26.88 54.69 27.34M50.73 41.65Q50.73 38.13 51.17 34.64Q51.22 34.30 51.48 34.05Q51.73 33.79 52.15 33.79Q52.51 33.79 52.76 34.07Q53.00 34.35 53.00 34.72Q53.00 34.86 52.94 35.60Q52.88 36.33 52.80 37.34Q52.71 38.35 52.65 39.49Q52.59 40.63 52.59 41.58Q52.59 42.87 52.84 43.66Q53.10 44.46 53.50 44.90Q53.91 45.34 54.36 45.48Q54.81 45.63 55.22 45.63Q55.91 45.63 56.64 45.14Q57.37 44.65 58.14 43.77Q58.91 42.90 59.69 41.66Q60.47 40.43 61.23 38.92Q61.35 38.67 61.57 38.54Q61.79 38.40 62.06 38.40Q62.45 38.40 62.71 38.70Q62.96 38.99 62.96 39.33Q62.96 39.58 62.87 39.75Q62.57 40.31 62.13 41.11Q61.69 41.92 61.13 42.77Q60.57 43.63 59.90 44.47Q59.23 45.31 58.47 45.98Q57.71 46.66 56.88 47.07Q56.05 47.49 55.20 47.49Q54.10 47.49 53.27 47.02Q52.44 46.56 51.87 45.78Q51.29 45.00 51.01 43.93Q50.73 42.87 50.73 41.65M53.32 27.34Q53.32 27.00 53.06 26.75Q52.81 26.49 52.47 26.49Q52.12 26.49 51.88 26.75Q51.64 27.00 51.64 27.34Q51.64 27.69 51.88 27.93Q52.12 28.17 52.47 28.17Q52.81 28.17 53.06 27.93Q53.32 27.69 53.32 27.34ZM66.63 44.31Q67.02 43.51 67.53 42.54Q68.04 41.58 68.63 40.59Q69.21 39.60 69.86 38.62Q70.51 37.65 71.22 36.77Q71.92 35.91 72.64 35.53Q73.36 35.16 74.00 35.16Q75.27 35.16 75.88 36.08Q76.49 37.01 76.49 38.38Q76.49 38.70 76.45 39.15Q76.42 39.60 76.38 40.11Q76.34 40.63 76.31 41.15Q76.27 41.67 76.27 42.14Q76.27 42.72 76.33 43.26Q76.39 43.80 76.56 44.20Q76.73 44.60 77.05 44.84Q77.37 45.07 77.88 45.07Q78.81 45.07 79.69 44.35Q80.57 43.63 81.31 42.64Q82.06 41.65 82.60 40.63Q83.15 39.60 83.42 38.96Q83.54 38.70 83.78 38.55Q84.01 38.40 84.28 38.40Q84.69 38.40 84.95 38.71Q85.21 39.01 85.21 39.36Q85.21 39.53 85.13 39.70Q85.03 39.89 84.74 40.50Q84.45 41.11 83.97 41.91Q83.50 42.70 82.86 43.59Q82.23 44.48 81.46 45.21Q80.69 45.95 79.80 46.44Q78.91 46.92 77.93 46.92Q76.83 46.92 76.15 46.50Q75.46 46.07 75.07 45.37Q74.68 44.68 74.55 43.84Q74.41 42.99 74.41 42.14Q74.41 41.77 74.45 41.31Q74.49 40.84 74.55 40.33Q74.61 39.82 74.65 39.31Q74.68 38.79 74.68 38.33Q74.68 37.55 74.44 37.27Q74.19 36.99 74.00 36.99Q73.61 36.99 73.11 37.44Q72.61 37.89 72.06 38.62Q71.51 39.36 70.94 40.27Q70.36 41.19 69.86 42.09Q69.36 42.99 68.93 43.81Q68.51 44.63 68.26 45.17Q67.77 46.19 67.29 46.55Q66.80 46.90 66.28 46.90Q65.58 46.90 65.15 46.47Q64.72 46.04 64.72 45.26Q64.72 45.09 64.77 44.59Q64.82 44.09 64.89 43.40Q64.97 42.70 65.04 41.89Q65.11 41.09 65.19 40.30Q65.26 39.50 65.31 38.82Q65.36 38.13 65.36 37.67Q65.36 37.06 65.31 36.50Q65.26 35.94 65.11 35.82Q64.89 35.89 64.33 36.73Q63.77 37.57 62.89 39.70Q62.77 39.97 62.52 40.11Q62.28 40.26 62.01 40.26Q61.60 40.26 61.35 39.98Q61.11 39.70 61.11 39.33Q61.11 39.16 61.18 38.96Q62.28 36.35 63.24 35.12Q64.21 33.89 65.16 33.89Q65.72 33.89 66.11 34.17Q66.50 34.45 66.74 34.91Q66.97 35.38 67.08 35.94Q67.19 36.50 67.19 37.08Q67.19 37.52 67.13 38.45Q67.07 39.38 66.97 40.44Q66.87 41.50 66.78 42.55Q66.70 43.60 66.63 44.31ZM86.16 37.48Q86.01 37.87 85.80 38.35Q85.60 38.84 85.33 39.38Q85.11 39.79 84.88 40.03Q84.64 40.26 84.28 40.26Q83.86 40.26 83.62 40.00Q83.37 39.75 83.37 39.40Q83.37 39.28 83.40 39.20Q83.42 39.11 83.52 38.92Q84.16 37.70 84.46 36.78Q84.77 35.86 84.96 34.86Q84.79 34.30 84.72 33.91Q84.64 33.52 84.64 33.11Q84.64 32.30 84.99 31.80Q85.33 31.30 85.94 31.30Q86.50 31.30 86.83 31.79Q87.16 32.28 87.16 32.98Q87.16 33.37 87.08 33.76Q87.01 34.16 86.89 34.74Q87.45 36.13 88.01 37.21Q88.57 38.28 89.01 39.17Q89.45 40.06 89.73 40.84Q90.01 41.63 90.01 42.41Q90.01 43.43 89.60 44.36Q89.18 45.29 88.23 45.92Q88.35 45.95 88.48 45.95Q88.60 45.95 88.72 45.95Q90.11 45.95 91.28 45.31Q92.46 44.68 93.40 43.66Q94.34 42.65 95.07 41.42Q95.80 40.19 96.34 38.96Q96.58 38.40 97.02 38.40Q97.44 38.40 97.67 38.70Q97.90 38.99 97.90 39.33Q97.90 39.53 97.83 39.70Q97.56 40.36 97.13 41.20Q96.70 42.04 96.11 42.93Q95.51 43.82 94.73 44.68Q93.95 45.53 92.98 46.20Q92.02 46.88 90.87 47.28Q89.72 47.68 88.35 47.68Q86.72 47.68 85.31 47.11Q83.91 46.53 83.03 45.21Q82.89 45.00 82.89 44.75Q82.89 44.38 83.17 44.10Q83.45 43.82 83.81 43.82Q84.20 43.82 84.47 44.09Q84.50 44.14 84.64 44.25Q84.79 44.36 85.00 44.49Q85.21 44.63 85.49 44.73Q85.77 44.82 86.06 44.82Q86.65 44.82 87.05 44.58Q87.45 44.34 87.70 43.98Q87.94 43.63 88.05 43.23Q88.16 42.82 88.16 42.53Q88.16 41.92 87.96 41.31Q87.77 40.70 87.46 40.09Q87.16 39.48 86.80 38.83Q86.45 38.18 86.16 37.48ZM107.40 43.82Q106.79 43.82 106.32 43.73Q105.96 44.46 105.44 45.08Q104.93 45.70 104.26 46.17Q103.59 46.63 102.76 46.90Q101.93 47.17 100.95 47.17Q99.80 47.17 98.85 46.77Q97.90 46.36 97.19 45.64Q96.48 44.92 96.09 43.91Q95.70 42.90 95.70 41.67Q95.70 40.11 96.26 38.95Q96.83 37.79 97.56 37.02Q98.29 36.25 99.02 35.88Q99.76 35.50 100.12 35.50Q100.54 35.50 100.74 35.72Q100.95 35.94 100.95 36.30Q100.95 36.72 100.70 36.93Q100.44 37.13 100.05 37.33Q99.66 37.52 99.22 37.88Q98.78 38.23 98.40 38.77Q98.02 39.31 97.78 40.04Q97.53 40.77 97.53 41.67Q97.53 42.48 97.78 43.18Q98.02 43.87 98.49 44.37Q98.95 44.87 99.58 45.15Q100.22 45.43 101.00 45.43Q102.39 45.43 103.31 44.79Q104.22 44.14 104.71 43.14Q103.27 42.38 102.34 40.99Q101.42 39.60 101.42 37.87Q101.42 36.47 102.09 35.60Q102.76 34.72 103.86 34.72Q104.52 34.72 105.10 35.03Q105.69 35.35 106.14 36.04Q106.59 36.72 106.86 37.79Q107.13 38.87 107.13 40.36Q107.13 41.14 106.93 41.99Q107.08 42.02 107.23 42.02Q107.37 42.02 107.54 42.02Q108.37 42.02 109.03 41.82Q109.69 41.63 110.23 41.24Q110.77 40.84 111.19 40.23Q111.62 39.62 112.01 38.82Q112.08 38.67 112.33 38.54Q112.57 38.40 112.82 38.40Q113.13 38.40 113.42 38.66Q113.70 38.92 113.70 39.33Q113.70 39.53 113.60 39.76Q113.50 39.99 113.40 40.19Q112.99 40.92 112.44 41.59Q111.89 42.26 111.15 42.76Q110.40 43.26 109.47 43.55Q108.54 43.85 107.40 43.82M103.22 37.67Q103.22 38.13 103.34 38.65Q103.47 39.16 103.72 39.66Q103.98 40.16 104.36 40.61Q104.74 41.06 105.25 41.38Q105.32 40.87 105.32 40.38Q105.32 39.72 105.22 39.04Q105.13 38.35 104.94 37.78Q104.76 37.21 104.49 36.85Q104.22 36.50 103.86 36.50Q103.71 36.50 103.47 36.72Q103.22 36.94 103.22 37.67ZM117.36 44.31Q117.75 43.51 118.26 42.54Q118.77 41.58 119.36 40.59Q119.95 39.60 120.59 38.62Q121.24 37.65 121.95 36.77Q122.66 35.91 123.38 35.53Q124.10 35.16 124.73 35.16Q126.00 35.16 126.61 36.08Q127.22 37.01 127.22 38.38Q127.22 38.70 127.19 39.15Q127.15 39.60 127.11 40.11Q127.08 40.63 127.04 41.15Q127.00 41.67 127.00 42.14Q127.00 42.72 127.06 43.26Q127.12 43.80 127.29 44.20Q127.47 44.60 127.78 44.84Q128.10 45.07 128.61 45.07Q129.54 45.07 130.42 44.35Q131.30 43.63 132.04 42.64Q132.79 41.65 133.34 40.63Q133.89 39.60 134.16 38.96Q134.28 38.70 134.51 38.55Q134.74 38.40 135.01 38.40Q135.42 38.40 135.68 38.71Q135.94 39.01 135.94 39.36Q135.94 39.53 135.86 39.70Q135.77 39.89 135.47 40.50Q135.18 41.11 134.70 41.91Q134.23 42.70 133.59 43.59Q132.96 44.48 132.19 45.21Q131.42 45.95 130.53 46.44Q129.64 46.92 128.66 46.92Q127.56 46.92 126.88 46.50Q126.20 46.07 125.81 45.37Q125.42 44.68 125.28 43.84Q125.15 42.99 125.15 42.14Q125.15 41.77 125.18 41.31Q125.22 40.84 125.28 40.33Q125.34 39.82 125.38 39.31Q125.42 38.79 125.42 38.33Q125.42 37.55 125.17 37.27Q124.93 36.99 124.73 36.99Q124.34 36.99 123.84 37.44Q123.34 37.89 122.79 38.62Q122.24 39.36 121.67 40.27Q121.09 41.19 120.59 42.09Q120.09 42.99 119.67 43.81Q119.24 44.63 118.99 45.17Q118.51 46.19 118.02 46.55Q117.53 46.90 117.02 46.90Q116.31 46.90 115.88 46.47Q115.45 46.04 115.45 45.26Q115.45 45.09 115.50 44.59Q115.55 44.09 115.63 43.40Q115.70 42.70 115.77 41.89Q115.84 41.09 115.92 40.30Q115.99 39.50 116.04 38.82Q116.09 38.13 116.09 37.67Q116.09 37.06 116.04 36.50Q115.99 35.94 115.84 35.82Q115.63 35.89 115.06 36.73Q114.50 37.57 113.62 39.70Q113.50 39.97 113.26 40.11Q113.01 40.26 112.74 40.26Q112.33 40.26 112.08 39.98Q111.84 39.70 111.84 39.33Q111.84 39.16 111.91 38.96Q113.01 36.35 113.98 35.12Q114.94 33.89 115.89 33.89Q116.46 33.89 116.85 34.17Q117.24 34.45 117.47 34.91Q117.70 35.38 117.81 35.94Q117.92 36.50 117.92 37.08Q117.92 37.52 117.86 38.45Q117.80 39.38 117.70 40.44Q117.60 41.50 117.52 42.55Q117.43 43.60 117.36 44.31Z"
            />
          </g>
        </svg>
      </h1>
      <div class="flex items-center">
        <BaseDarkToggle />
        <div class="mr-4 cursor-pointer">
          <Icon name="icon-park:search" size="22" @click="handleSearch" />
        </div>
        <div class="cursor-pointer md:hidden" @click="handleIconMenu">
          <Icon v-if="menuToggle" name="line-md:menu-to-close-alt-transition" size="26" />
          <Icon v-else name="line-md:close-to-menu-transition" size="26" />
        </div>
      </div>
    </div>
    <n-drawer v-model:show="menuToggle" width="70%" placement="left">
      <div
        class="mb-deader-menu h-full w-full overflow-y-auto rounded-lg p-5 text-center shadow-xl"
      >
        <n-avatar :size="160" round :src="userStore.userInfo?.avatar" />
        <h3 class="mt-2 text-center text-base font-semibold">
          {{ blogStore.siteConfig?.siteAuthor }}
        </h3>
        <p class="text-15 my-2 text-zinc-400">{{ blogStore.siteConfig?.siteIntro }}</p>
        <ul
          class="border-v-hc flex justify-evenly border-b-2 border-dashed pb-4 text-center text-lg"
        >
          <li>
            <p>文章</p>
            <span>{{ blogStore.articleCount || 0 }}</span>
          </li>
          <li>
            <p>分类</p>
            <span>{{ blogStore.categoryCount || 0 }}</span>
          </li>
        </ul>
        <ul class="mb-menu py-3">
          <li v-for="(item, index) in blogStore.menuList" :key="index" class="flex justify-center">
            <NuxtLink
              :to="item.path"
              class="mb-3 flex h-12 w-40 items-center justify-center text-base outline-none"
              @click="menuToggle = false"
            >
              <Icon :name="item.icon" />
              <p class="ml-1">{{ item.text }}</p>
            </NuxtLink>
          </li>
          <li class="flex justify-center">
            <div
              v-if="userStore.userInfo"
              class="mb-3 flex h-12 w-40 items-center justify-center text-base outline-none"
              @click="logout"
            >
              <p class="ml-1">登出</p>
            </div>
            <NuxtLink
              v-else
              to="/login"
              class="mb-3 flex h-12 w-40 items-center justify-center text-base outline-none"
              @click="menuToggle = false"
            >
              <p class="ml-1">登录</p>
            </NuxtLink>
          </li>
        </ul>
      </div>
    </n-drawer>
  </header>
</template>

<style scoped>
.mb-deader-menu::-webkit-scrollbar {
  display: none;
}
.mb-deader-menu .mb-menu .router-link-active {
  @apply bg-v-hc shadow-v-hc/50 dark:bg-v-hc-dark dark:shadow-v-hc-dark/50 rounded-xl text-white shadow-lg;
}
</style>
